<template>
  <div class="user-name-sign-wrapper">
    <div class="avatar-wrapper" @click="$open('/user/profile')">
      <img :src="userAvatarUrl" alt="avatar" class="avatar">
    </div>

    <div class="name-sign">
      <h2 class="name">{{ user.name }}</h2>
      <h3 class="sign">{{ user.sign }}</h3>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      user: {
        type: Object,
        default: () => ({
          avatar: '',
          name: 'Noname',
          sign: '这里什么也没有'
        })
      },
    },
    computed: {
      userAvatarUrl() {
        return this.user.avatar 
        ? this.$baseURL + this.user.avatar 
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
    },
  }
</script>

<style lang="less" scoped>
@w: var(--userNameSignWidth);
@h: var(--userNameSignHeight);

.user-name-sign-wrapper {
  width: @w;
  height: @h;

  .avatar-wrapper,
  .name-sign {
    float: left;
  }

  .avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40%;
    height: @h;

    .avatar {
      --a: calc(@h * 0.6);
      width: var(--a);
      height: var(--a);

      border-radius: 50%;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .name-sign {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 60%;
    height: @h;

    h2 {
      line-height: calc(@h * 0.3);
      font-size: calc(@h * 0.22);
    }

    h3 {
      height: calc(@h * 0.3);
      line-height: calc(@h * 0.3);
      font-size: calc(@h * 0.15);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>